<css href="__PUBLIC__/boot-date/css/bootstrap-datetimepicker.min.css" />
<script src="__PUBLIC__/boot-date/js/bootstrap-datetimepicker.min.js"></script>
<script src="__PUBLIC__/boot-date/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<div class="table-tools">
    <!--<a href="__URL__/addUI" class="btn btn-info" title="添加权限"><i class="fa fa-copy"></i> 添 加 </a>-->
    <!--<button type="submit" class="btn btn-primary" title="删除勾选的资源"><i class="glyphicon glyphicon-remove"></i> 删 除 </button>-->
    <!--<button type="button" class="btn btn-success" title="重新排序资源" onclick="sortQuestions()"><i class="fa fa-copy"></i> 重 排 </button>-->
    <form class="form-inline" method="post" action="__URL__/matchLog" id="search_form"  role="form">
        <input type="hidden" name="pagenum" id="pagenum_hidden" value="{$page.pagenum}">
        <input type="hidden" name="count" value="{$recordcount}">
        <div class="form-group">
            <input type="text" name="join_id" value="{$join_id}" placeholder="请输入参赛者id">
            <input type="text" name="user_id" value="{$user_id}" placeholder="请输入擂主id">
            <input type="text" name="winner" value="{$winner}" placeholder="请输入获胜者id">
            <input type="text" name="opponent_id" value="{$opponent_id}" placeholder="请输入对手id">
            <input type="text" name="room_id" value="{$room_id}" placeholder="请输入房间id">
            <select  name="status" id="status" class="form-control">
            <switch name="status">
                <case value="-1">
                    <option value="-1" selected>比赛状态</option>
                    <option value="2">比赛取消</option>
                    <option value="1">比赛结束</option>
                    <option value="0">比赛中</option>
                </case>
                <case value="0">
                    <option value="-1">比赛状态</option>
                    <option value="2">比赛取消</option>
                    <option value="1">比赛结束</option>
                    <option value="0" selected>比赛中</option>
                </case>
                <case value="1">
                    <option value="-1">比赛状态</option>
                    <option value="2">比赛取消</option>
                    <option value="1" selected>比赛结束</option>
                    <option value="0">比赛中</option>
                </case>
                <case value="2">
                    <option value="-1">比赛状态</option>
                    <option value="2" selected>比赛取消</option>
                    <option value="1">比赛结束</option>
                    <option value="0">比赛中</option>
                </case>
                <default/>
                <option value="-1" selected>比赛状态</option>
                <option value="2">比赛取消</option>
                <option value="1">比赛结束</option>
                <option value="0">比赛中</option>
            </switch>
        </select>
            <select  name="model" id="model" class="form-control">
                <switch name="model">
                    <case value="-1">
                        <option value="-1" selected>比赛模式</option>
                        <option value="4">5V5 征召</option>
                        <option value="3">5V5 王者</option>
                        <option value="2">5V5 深渊</option>
                        <option value="1">3V3 长平</option>
                        <option value="0">1V1 墨家</option>
                    </case>
                    <case value="0">
                        <option value="-1">比赛模式</option>
                        <option value="4">5V5 征召</option>
                        <option value="3">5V5 王者</option>
                        <option value="2">5V5 深渊</option>
                        <option value="1">3V3 长平</option>
                        <option value="0" selected>1V1 墨家</option>
                    </case>
                    <case value="1">
                        <option value="-1">比赛模式</option>
                        <option value="4">5V5 征召</option>
                        <option value="3">5V5 王者</option>
                        <option value="2">5V5 深渊</option>
                        <option value="1" selected>3V3 长平</option>
                        <option value="0">1V1 墨家</option>
                    </case>
                    <case value="2">
                        <option value="-1">比赛模式</option>
                        <option value="4">5V5 征召</option>
                        <option value="3">5V5 王者</option>
                        <option value="2" selected>5V5 深渊</option>
                        <option value="1">3V3 长平</option>
                        <option value="0">1V1 墨家</option>
                    </case>
                    <case value="3">
                        <option value="-1">比赛模式</option>
                        <option value="4">5V5 征召</option>
                        <option value="3" selected>5V5 王者</option>
                        <option value="2">5V5 深渊</option>
                        <option value="1">3V3 长平</option>
                        <option value="0">1V1 墨家</option>
                    </case>
                    <case value="4">
                        <option value="-1">比赛模式</option>
                        <option value="4" selected>5V5 征召</option>
                        <option value="3">5V5 王者</option>
                        <option value="2">5V5 深渊</option>
                        <option value="1">3V3 长平</option>
                        <option value="0">1V1 墨家</option>
                    </case>
                    <default/>
                    <option value="-1" selected>比赛模式</option>
                    <option value="4">5V5 征召</option>
                    <option value="3">5V5 王者</option>
                    <option value="2">5V5 深渊</option>
                    <option value="1">3V3 长平</option>
                    <option value="0">1V1 墨家</option>
                </switch>
            </select>
        </div>
        <div class="form-group" style="margin-left: 1%">
            <label class="col-md-6 col-xs-12 control-label" > 开始时间</label>
            <div class="col-md-2">
                <input size="16" type="text" id="startTime" name="startTime" value="{$startTime}" readonly class="start_datetime">
            </div>
        </div>
        <div class="form-group" style="margin-left: 1%">
            <label class="col-md-6 col-xs-12 control-label" >结束时间</label>
            <div class="col-md-2">
                <input size="16" type="text" id="endTime" name="endTime" value="{$endTime}" readonly class="end_datetime">
            </div>
        </div>
        <button type="reset" style="margin-left: 1%">清空</button>
        <button  type="button" onclick="gotoPage(0)">搜索</button>
    </form>
    <p>比赛记录列表</p>
</div>
<notempty name="show_recommend">
    推荐人:{$recommend_user.nickname} ID:{$recommend_user.id}
</notempty>
<table id="users-table" class="table table-striped table-hover table-condensed datatable">
    <thead>
    <tr id="log_{$log.id}">
        <th width="50px">ID</th>
        <th>房间ID</th>
        <th>擂主ID</th>
        <th>对手ID</th>
        <th>擂主截图</th>
        <th>对手截图</th>
        <th>金币／钻石</th>
        <th>金额类型</th>
        <th>段位</th>
        <th>比赛状态</th>
        <th>比赛模式</th>
        <th>获胜者ID</th>
        <th>创建时间</th>
        <th>操作</th>
        <!--<th width="150px">操作</th>-->
        <!--<th width="80px">排序</th>-->
    </tr>
    </thead>
    <tbody>
    <volist name="list" id="log">
        <tr>
            <!--<td width="50px"><input name='id[]' type="checkbox" value="{$log.id}" /></td>-->
            <td class="question-name">{$log.id}{$is_opponent_delete}{$is_user_delete}</td>
            <td class="question-name">{$log.room_id}</td>
            <td class="question-name">{$log.user_id}</td>
            <td class="question-name">{$log.opponent_id}</td>
            <td class="question-name"><a onclick="imageClick(this)" data-url="__ROOT__{$log.user_image}" class="btn btn-default btn-rounded btn-condensed btn-sm" title="查看擂主截图"><span class="fa fa-pencil">查看</span></a></td>
            <td class="question-name"><a onclick="imageClick(this)" data-url="__ROOT__{$log.opponent_image}" class="btn btn-default btn-rounded btn-condensed btn-sm" title="查看对手截图"><span class="fa fa-pencil">查看</span></a></td>
            <td class="question-name">{$log.integral}</td>
            <td class="question-name">
                <switch name="log.money_type">
                    <case value="0">
                        金币
                    </case>
                    <case value="1">
                        钻石
                    </case>
                </switch>
            </td>
            <td class="question-name">
                <switch name="log.level">
                    <case value="1">
                        青铜
                    </case>
                    <case value="2">
                        白银
                    </case>
                    <case value="3">
                        黄金
                    </case>
                    <case value="4">
                        铂金
                    </case>
                    <case value="5">
                        钻石
                    </case>
                    <case value="6">
                        星耀
                    </case>
                    <case value="7">
                        王者
                    </case>
                </switch>
            </td>
            <td class="question-name">
                <switch name="log.status">
                    <case value="0">
                        比赛中
                    </case>
                    <case value="1">
                        比赛结束
                    </case>
                    <case value="2">
                        比赛取消
                    </case>
                </switch>
            </td>
            <td class="question-name">
                <switch name="log.model">
                    <case value="0">
                        1v1
                    </case>
                    <case value="1">
                        3v3
                    </case>
                    <case value="2">
                        5V5 深渊
                    </case>
                    <case value="3">
                        5V5 王者
                    </case>
                    <case value="4">
                        5V5 征召
                    </case>
                </switch>
            </td>
            <td class="question-name" id="winner_{$log.id}">{$log.winner}</td>
            <td class="question-name">{$log.create_time}</td>
            <td>
                <eq name="log.status" value="0">
                    <if condition="($log['opponent_image'] neq '' ) OR ($log['user_image'] neq '')">
                    <div id="judge_div_{$log.id}">
                        <a onclick="judge(this)" data-wechat_number="{$log.wechat_number}" data-o_wechat_number="{$log.o_wechat_number}"
                           data-o_game_name="{$log.o_game_name}"  data-game_name="{$log.game_name}" data-log_id="{$log.id}"
                           data-user_id="{$log.user_id}" data-opponent_id="{$log.opponent_id}"
                           data-user_image="{$log.user_image}" data-opponent_image="{$log.opponent_image}"
                           class="btn btn-default btn-rounded btn-condensed btn-sm" title="判定输赢"><span class="fa fa-pencil">判定</span>
                        </a>
                    </div>
                    </if>
                </eq>
            <!--<a onclick="deleteById('{$user.id}')" class="btn btn-default btn-rounded btn-condensed btn-sm" title="删除权限"><span class="glyphicon glyphicon-remove">删除</span></a>-->
            </td>
            <!--<td width="80px"><input name="sort[{$user.id}]" class="sort-input" type="text" value="{$user.sort}" /></td>-->
        </tr>
    </volist>
    </tbody>
</table>
<nav style="float:right">
    <spen class="total">共 {$recordcount}条记录</spen>
    <div class="fr">
        <ul class="pagination">
            <eq name="page['pagenum']" value="1">
                <li class="disabled">
                    <else/>
                <li>
            </eq>
            <a href="#" onclick="gotoPage('1')">«</a></li>
            <foreach name="page.pagenums" item="vo">
                <eq name="page['pagenum']" value="$vo">
                    <li class="active"><a href="#">{$vo}</a></li>
                    <else/>
                    <li><a href="#" onclick="gotoPage('{$vo}')">{$vo}</a></li>
                </eq>
            </foreach>
            <eq name="page['pagenum']" value="$page.endPage">
                <li class="disabled">
                    <else/>
                <li>
            </eq>
            <a href="#" onclick="gotoPage('{$page.totalpage}')">»</a></li>
        </ul>
    </div>
</nav>
<div class="modal fade" id="image_alert" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">截图</h4>
            </div>
            <div class="modal-body" id="image_content">
            </div>
            <div class="modal-footer">
                <button type="button" id="close_btn" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!--<button type="button" class="btn btn-primary">Save changes</button>-->
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="hint_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" >提示</h4>
            </div>
            <div class="modal-body" id="hint_content">
            </div>
            <div class="modal-footer">
                <button type="button"  class="btn btn-default" data-dismiss="modal">关闭</button>
                <!--<button type="button" class="btn btn-primary">Save changes</button>-->
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="judge_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" >判定输赢</h4>
            </div>
            <div class="modal-body">
                <div class="radio">
                    <label>
                        <input type="radio" name="winner_user_id" id="userRadio">
                        <span id="user_content"></span>
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="winner_user_id" id="opponentRadio">
                        <span id="opponent_content"></span>
                    </label>
                </div>
                <div id="user_image_div">

                </div>
                <div id="opponent_image_div">

                </div>
            </div>
            <input type="hidden" name="log_id" id="log_id">
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" onclick="judgeConfirm()" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>
<script src="__PUBLIC__/assets/js/layer.js"></script>
<script>
    function gotoPage(pagenum) {
        //提交form
        $('#pagenum_hidden').val(pagenum);
        $('#search_form').submit();
    }
    $(".start_datetime").datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        minView: 0, //选择日期后，不会再跳转去选择时分秒
        language:  'zh-CN',
    }).on('change',function(ev){
        var startDate = $('.start_datetime').val();
        console.info('startDate:'+startDate);
        $(".end_datetime").datetimepicker('setStartDate',startDate);
        $(".start_datetime").datetimepicker('hide');
    });
    $(".end_datetime").datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        minView: 0, //选择日期后，不会再跳转去选择时分秒
        language:  'zh-CN',
    }).on('change',function(ev){
        var returnDate = $(".end_datetime").val();
        console.info('returnDate:'+returnDate);
        $(".start_datetime").datetimepicker('setReturnDate',returnDate);
        $(".end_datetime").datetimepicker('hide');
    });

    function imageClick(obj) {
        var url = $(obj).data('url');
        var html = '';
//        html += '<img src="__ROOT__' + url + '" width="400" height="400"  alt="400*400"/>';
        html += '<img src="' + url + '" style="width:100%;" />';
        $("#image_content").empty().append(html);
        $("#image_alert").modal();
    }

    function judge(obj){
        var log_id = $(obj).data('log_id');
        var wechat_number = $(obj).data('wechat_number');
        var o_wechat_number = $(obj).data('o_wechat_number');
        var o_game_name = $(obj).data('o_game_name');
        var game_name = $(obj).data('game_name');
        var user_id =  $(obj).data('user_id');
        var opponent_id =  $(obj).data('opponent_id');
        var opponent_image =  $(obj).data('opponent_image');
        var user_image =  $(obj).data('user_image');
        $('#userRadio').val(user_id);
        $('#log_id').val(log_id);
        $('#opponentRadio').val(opponent_id);
        $('#user_content').empty().append('擂主 微信号:'+wechat_number+" 游戏名称："+game_name + " 用户ID:"+user_id);
        $('#opponent_content').empty().append('挑战者 微信号:'+o_wechat_number+" 游戏名称："+o_game_name + " 用户ID:"+opponent_id);
        $('#opponent_image_div').empty();
        $('#user_image_div').empty();
        if(user_image !=''){
            var html= '<img src="__ROOT__' + user_image + '" style="width:100%;" />';
            $('#user_image_div').empty().append(html);

        }else if(opponent_image != ''){
            var html= '<img src="__ROOT__' + opponent_image + '" style="width:100%;" />';
            $('#opponent_image_div').empty().append(html);
        }
        $('#judge_modal').modal();
    }
    function modalInfo(info,success){
//        layer.msg(info);
        if(success) {
            layer.msg(info, {icon: 1});
        }else{
            layer.msg(info, {icon: 2});
        }

    }
    function judgeConfirm(){
        $('#judge_modal').modal('hide');
        var winner_user_id = $("input[name='winner_user_id']:checked").val();
        var log_id = $('#log_id').val();
        console.info(winner_user_id);
        if(winner_user_id == undefined){
            return;
        }
        if(log_id == ''){
            return;
        }
        $.ajax({
            type: "POST",
            url: "__URL__/judge",
            data: {winner_user_id: winner_user_id,log_id:log_id},
            dataType: "json",
            success: function (data) {
                $("#hint_content").empty().append(data.message);
                $("#hint_modal").modal();
                if(data.success){
                    $('#winner_'+log_id).empty().append(winner_user_id);
                    $('#judge_div_'+log_id).hide();
                }
            },
            error: function (data) {
                $("#hint_content").empty().append("请求超时！");
                $("#hint_modal").modal();
            }
        });
    }
</script>